<template>
  <div>
    <div class="schedule">
      <div class="row" v-for="(item,index) in nearYearSchedule" :key="index" v-if="nearYearSchedule.length!==0">
        <div>
          <div class="date">{{item[0].beginDate.substring(0,11)}}</div>
          <div class="week">({{weekMonth(item[0].beginDate)}})</div>
        </div>
        <div class="content">
          <div v-for="(child,inx) in item" :key="inx">
            <span :class="scheduleTheme[child.group]" class="font20">●</span>
            <span class="group-type">{{groupType[child.group]}}</span>
            <span v-if="isAllDay(child.beginDate,child.endDate)" class="is-all-day">
              <span :class="scheduleTheme[child.group]" class="font20">● </span> 全天
         <!-- <span :class="scheduleTheme[child.group]" class="iconfont icon-quantianyingye"></span>-->
            </span>
            <span v-if="!isAllDay(child.beginDate,child.endDate)" class="un-all-day"></span>
            <span class="content-text" @click="showInfo(child)">{{child.content}}</span>
          </div>
        </div>

      </div>
      <!--没有日程-->
      <div class="text-align-center" v-if="nearYearSchedule.length===0">
        <img src="../../../assets/imgs/empty-data.png" alt="" width="50%">
        <div class="empty-data-text">暂无日程，快来添加日程吧！</div>
      </div>
    </div>
    <!--日程详情弹窗-->
    <model-schedule-detail :x="detailModelX" :y="detailModelY"
                           :day="detailModelDay" :contents="content" :groups="group"
                           :beginTime="beginTime" :endTime="endTime"
                           v-if="detailVisible" @cancel="cancel" />
  </div>
</template>

<script>
  import scheduleList from '../mock/schedule'
  import moment from "moment";
  import {checkPosition, getWeekDay,isAllDay} from "../utils/utils"
  import ModelScheduleDetail from "../tools/ModelScheduleDetail.vue";
  export default {
    name: "scheduleList",
    components:{
      ModelScheduleDetail
    },
    props: {
      viewType: String,
      currentDate: Date,
    },
    data(){
      return{
        scheduleList,
        detailVisible:false,
        groupType:'工作,休息,个人,加班,家庭'.split(","),
        scheduleTheme: 'blue,grayGreen,orange,red,purple,fuchsia'.split(','),
        detailModelX:null,
        detailModelY:null,
        detailModelDay:"",
        content:"",
        beginTime:"",
        endTime:"",
        group:"",
      }
    },
    computed:{
      nearYearSchedule(){
        let y = this.currentDate;
        let begin = new Date(y);
        let end = new Date(new Date(y).setFullYear(new Date(y).getFullYear()+1));
        end = moment(end).format('YYYYMM');
        begin = moment(begin).format('YYYYMM');
        const arr = this.scheduleList.filter(item=>{
          // let date = new Date(item.beginDate)
          let date = moment(item.beginDate).format('YYYYMM');
          return date>=begin&&date<=end;
        })
        let array = this.arraySort(arr)
        return array;
      },


    },
    methods:{
      moment,
      isAllDay,
      // 日期相同的追加到一个数组里
      arraySort(arr){
        let result = [];
        let temp = [];
        let results = [];
        for(let i=0;i<arr.length;i++){
          if(i===0){
            temp.push(arr[i]);
            result.push(temp)
          } else {
            let beg = arr[i].beginDate;
            beg = moment(new Date(beg)).format('YYYYMMDD');
            result.filter(item=>{
              const itArr = item.filter(it=>{
                let itBg = moment(new Date(it.beginDate)).format('YYYYMMDD');
                return itBg===beg;
              })
              // 如果有相同的值，push进去
              if(itArr.length!==0){
                item.push(arr[i]);
              }else if(itArr.length===0){
                let temps =[];
                temps.push(arr[i]);
                results.push(temps)
              }
              return itArr;
            })

          }
        }
        // 追加到返回结果中
        results.forEach(item=>{
          result.push(item)
        })

       return result;

      },
      // 计算周几
      weekMonth(val){
        let date = new Date(val);
       return  getWeekDay(date);
      },
      showInfo(child){
        this.detailModelDay = new Date(child.beginDate).getDate();
        this.content = child.content;
        this.beginTime = child.beginDate;
        this.endTime = child.endDate;
        this.group = child.group;
        event.preventDefault()
        let x = event.clientX
        let y = event.clientY
        this.checkXY(x,y);
        this.detailVisible = true;
      },
      checkXY(x,y){
        const json = checkPosition(x,y);
        this.detailModelX = json.x;
        this.detailModelY = json.y;
      },
      cancel(){
        this.detailVisible=false;
      },
    }

  }
</script>

<style scoped lang="less">
  @import "../tools/scrollbar";
  .schedule{
    width: 100%;
    height: calc(100vh - 68px);
    .row{
      min-height:60px;
      max-height: 150px;
      /*border:1px solid red;*/
      border-bottom: 1px solid #eee;
      overflow: auto;
      padding: 8px 16px;
      display: flex;
      .date{
        font-weight: 700;
        color:#000;
      }
      .week{
        color:#000;
      }
      .content{
        min-height:60px;
        max-height: 150px;
        overflow: auto;
        padding-left: 60px;

        div{
          height: 30px;
          line-height: 30px;
          /*font-size: 16px;*/
          .is-all-day{
            /*padding: 1px 8px;*/
            /*border-radius: 5px;*/
            /*color:#000;*/
            /*font-size: 14px;*/
            /*background-color: #4FACF1;*/

          }
          .un-all-day{
            padding: 1px 25px;
          }
          .group-type{
            padding-left: 16px;
            padding-right: 30px;
            /*font-size: 14px;*/
          }
          .content-text{
            display: block;
            float: right;
            padding-left: 20px;
            width: calc(100vw - 320px);
            cursor: pointer;
            white-space:nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .content-text:hover{
            color:#4FACF1;
          }
        }
      }
    }
  }
  .blue {
    color: rgb(0,168,249);
  }

  .grayGreen {
    color: rgb(49,157,10);
  }
  .orange{ // 个人
    color: rgb(249,216,80);
  }
  .red{ // 加班
    color: rgb(235,67,106);
  }
  .purple{ // 家庭
    color: rgb(249,214,74);
  }
  .font20{
    font-size: 20px;
  }
  .text-align-center{
    text-align: center;
  }
  .empty-data-text{
    color: #aaa;
    padding: 16px;
    font-size: 16px;
  }
</style>